import React from "react";
import { useNavigate } from "react-router-dom";
import { Button, Input, Form, Toast } from "react-vant";
import axios from "axios";
import "./index.css";
const Index: React.FC = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const onFinish = (values: any) => {
    console.log(values);
    axios.post("/api/login", values).then((resp) => {
      let { code, msg, token, userInfo } = resp.data;
      if (code == 200) {
        Toast.success(msg);
        localStorage.setItem("token", token);
        localStorage.setItem("userInfo", JSON.stringify(userInfo));
        navigate("/home/micromedicine");
      } else {
        Toast.info(msg)
      }
    });
  };
  return (
    <div>
      <div className="loginhead">
        <img src="" />
      </div>
      <div className="login-title"><h3>微医</h3></div>
      <div className="loginbody">
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div div style={{ margin: "16px 16px 0" }}>
              <Button round nativeType="submit" type="primary" block>
                登录
              </Button>
            </div>
          }
        >
          <Form.Item
            tooltip={{
              message:
                "A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.",
            }}
            rules={[{ required: true, message: "请填写用户名" }]}
            name="username"
            label="用户名"
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item
            rules={[{ required: true, message: "请填写密码" }]}
            name="password"
            label="密码"
          >
            <Input placeholder="请输入密码" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default Index;
